/**
* @description: 路由器巡视列表
* @author: JiWei
* @remark:
**/
<template>
  <view class="router-patrol-main">
    <nav-bar class="header" :background="backgroundColor" back title="通信路由器" @goBack="goBack">
      <img  slot="iconfont" src="../../../../static/img/add.png" alt="" @click="add">
    </nav-bar>
    <view class="header-bar">
      <!-- 切换tab -->
      <div class="get-state-tab" >
        <div class="info-tab-item"
             :class="currentTab === 'unfinished' ? ' info-tab-current': ''"
             @click="tabChange('unfinished')">未完成</div>
        <div class="info-tab-item"
             :class="currentTab === 'finished' ? ' info-tab-current': ''"
             @click="tabChange('finished')">已完成</div>
      </div>
    </view>
    <!-- 搜索框  -->
    <view class="patrol-search">
      <van-search disabled show-action v-model="searchValue"
                  left-icon="" action-text="重置"
                  right-icon="search" placeholder="请输入路由器名称"
                  @click="showSearch=true" @cancel="onSearch('')" />
    </view>
    <view class="patrol-main" v-if="taskList.length > 0">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model="isLoading"
            :finished="finished"
            finished-text="没有更多了"
            @load="loadMore"
        >
          <!-- 列表循环   -->
          <view class="patrol-list" v-for="(item,index) in taskList" :key="index">

            <view v-if="currentTab === 'unfinished'">
              <view class="patrol-title">
                <view class="patrol-title-left">
                  <text class="patrol-main-title">{{ item.ROUTER_NAME }}</text>
                </view>
              </view>
              <hr class="patrol-hr">
              <view class="top-patrol-main">
                <view>
                  <text class="patrol-big-ltitle">路由器巡视结果:</text>
                  <text class="patrol-small-ltitle" :style="{color: statusColor(item)}">{{ item.ROUTERSTATE }}</text>
                </view>
                <view>
                  <text class="patrol-big-ltitle">业务巡视结果:</text>
                  <text class="patrol-small-ltitle" :style="{color: typeColor(item)}">{{ item.BUZSTATE }}</text>
                </view>
                <view>
                  <text class="patrol-big-ltitle">路由器业务总数:</text>
                  <text class="patrol-small-ltitle">{{ item.COUN }}</text>
                </view>
                <van-button type="info" class="patrol-btn" @click="toReceive(item)">巡视</van-button>
              </view>
            </view>

            <view v-if="currentTab === 'finished'" @click="jump(item)">
              <view class="patrol-title">
                <view class="patrol-title-left">
                  <text class="patrol-main-title">{{ item.ROUTER_NAME }}</text>
                </view>
              </view>
              <hr class="patrol-hr">
              <view class="top-patrol-main">
                <view>
                  <text class="patrol-big-ltitle">路由器巡视结果:</text>
                  <text class="patrol-small-ltitle" :style="{color: statusColor(item)}">{{ item.ROUTERSTATE }}</text>
                </view>
                <view>
                  <text class="patrol-big-ltitle">业务巡视结果:</text>
                  <text class="patrol-small-ltitle" :style="{color: typeColor(item)}">{{ item.BUZSTATE }}</text>
                </view>
                <view>
                  <text class="patrol-big-ltitle">路由器业务总数:</text>
                  <text class="patrol-small-ltitle">{{ item.COUN }}</text>
                </view>
                <view>
                  <text class="patrol-big-ltitle">巡视人:</text>
                  <text class="patrol-small-ltitle">{{ item.TOUR_OPER_NAME }}</text>
                </view>
                <view>
                  <text class="patrol-big-ltitle">巡视时间:</text>
                  <text class="patrol-small-ltitle">{{ item.TOUR_TIM }}</text>
                </view>
              </view>
            </view>
          </view>
        </van-list>
      </van-pull-refresh>
    </view>
    <!--弹出搜索页-->
    <van-popup v-model="showSearch" position="right">
      <search @cancel="showSearch = false;" :empty="showSearch"
              @search="onSearch" />
    </van-popup>
  </view>
</template>
<script>
import navBar from '../../../../components/common/nav-bar';
import search from "../../../common/search";
export default {
  name: 'routerPatrol',
  components: {navBar,search },
  props: {},
  data() {
    return {
      statusColor: (item) => {
        if(item.ROUTERSTATE.includes('一致')) return "#417ADC";
        if(item.ROUTERSTATE.includes('不存在')) return "#FF4355";
        if(item.ROUTERSTATE.includes('新增')) return "#41DC83";
        if(item.ROUTERSTATE.includes('更新')) return "#FFAD0E";
      },
      typeColor: (item)=> {
        if(item.BUZSTATE.includes('一致')) return "#417ADC";
        if(item.BUZSTATE.includes('不存在')) return "#FF4355";
        if(item.BUZSTATE.includes('新增')) return "#41DC83";
        if(item.BUZSTATE.includes('更新')) return "#FFAD0E";
      },
      backgroundColor:'#417ADC',
      taskId:'',
      taskSiteId:'',
      taskType:'',
      currentTab: "unfinished", // 当前显示内容 unfinished 未完成 finished 认领
      currentIndex:'0',
      searchValue:'',
      showSearch: false,
      taskList:[],
      refreshing: false, // 是否正在刷新
      isLoading: false,
      finished: false,
      total: 0, // 总条数
      page: 1,
      limit:20,
      taskSiteName:'',
    };
  },
  computed: {},
  watch: {},
  onLoad(e) {
    this.taskId = e.taskId
    this.taskSiteId = e.taskSiteId
    this.taskType= e.state
    this.taskSiteName = e.taskSiteName
    this.getList()
  },
  methods: {
    // 获取列表
    getList() {
      let params = {
        task_id: this.taskId,
        tour_state: this.currentIndex,
        router_name: this.searchValue,
        limit: this.limit,
        page: this.page,
      }
      this.$api.queryRoutersGetTask(params).then(res => {
        console.log(res,12312321321)
        this.isLoading = false;
        this.refreshing = false;
        this.taskList = this.taskList.concat(res.data.ROUTERS.map(item => {
          return {
            ...item
          }
        }))
        this.total = res.data.TOTAL_NUMBER
      })
    },
    goBack() {
      uni.navigateTo({
        url: `/pages/workBench/todoTask/taskList/taskList?id=${this.taskId}&state=${this.taskType}`
      })
    },
    add() {
      uni.navigateTo({
        url: `/pages/workBench/todoTask/routerPatrol/addRouterPatrol/addRouterPatrol?type=add&taskId=${this.taskId}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}&state=${this.taskType}`
      })
    },
    tabChange(currentTab) {
      this.currentTab = currentTab;
      (this.currentTab === "finished") && (this.currentIndex = '1');
      (this.currentTab === "unfinished") && (this.currentIndex = '0');
      this.searchValue=''
      this.onRefresh()
    },
    onSearch(searchValue) {
      this.searchValue = searchValue;
      this.onRefresh();
      this.showSearch = false;
    },
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.page = 1;
      this.taskList = [];
      this.getList()
    },
    loadMore() {
      if (this.total > this.taskList.length) {
        this.page = this.page + 1;
        this.getList();
      } else {
        this.finished = true;
      }
    },
    //   巡视按纽跳转
    toReceive(item) {
      console.log(item,312312321)
      if(item.BUZSTATE && item.ROUTERSTATE === '未巡视' || item.BUZSTATE!== '未巡视'&& item.ROUTERSTATE === '未巡视') {
        uni.navigateTo({
          url: `/pages/workBench/todoTask/routerPatrol/routerVerify?objId=${item.ROUTERID}&taskSiteId=${this.taskSiteId}&state=${this.taskType}&taskId=${item.TASK_ID}&taskSiteName=${this.taskSiteName}`
        })
      }else if(item.ROUTERSTATE!== '未巡视'&& item.BUZSTATE === '未巡视') {
        uni.navigateTo({
          url: `/pages/workBench/todoTask/routerPatrol/routerOperationalVerification?objId=${item.ROUTERID}&taskSiteId=${this.taskSiteId}&state=${this.taskType}&taskId=${item.TASK_ID}&taskSiteName=${this.taskSiteName}`
        })
      }

    },
  // jump 已完成跳转
    jump(item) {
      uni.navigateTo({
        url: `/pages/workBench/todoTask/routerPatrol/RouterTourDetails?objId=${item.ROUTERID}&taskSiteId=${this.taskSiteId}&state=${this.taskType}&taskId=${item.TASK_ID}&taskSiteName=${this.taskSiteName}`
      })
    }
  }
};
</script>
<style scoped lang="scss">
.router-patrol-main {
  height: 100vh;
  background: #F2F6FA;
  overflow: hidden;
  .header {
    img {
      width: px2vw(48);
      margin-right: px2vw(40);
    }
    .header-right {
      display: flex;
      /deep/.van-icon {
        font-size: px2vw(52);
        font-weight: bold;
      }

      /deep/.van-icon-scan {
        margin-right: px2vw(12);
      }

      /deep/.van-icon-filter-o {
        margin-left: px2vw(12);
      }
    }
  }
  .header-bar {
    height: px2vh(220);
    border-radius: 0 0 px2vh(40) px2vh(40);
    background: #417ADC;
    //margin-bottom: px2vh(130);
    display: flex;
    justify-content: center;
    .get-state-tab {
      width: calc(100% - #{px2vw(60)});
      height: px2vh(120);
      border-radius: px2vw(20);
      box-sizing: border-box;
      // margin: px2vh(40) px2vw(30) px2vh(37);
      background-color: rgba(255,255,255,0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      border: px2vw(2) solid rgba(198,215,245,1);
      .info-tab-item {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgba(255,255,255,1);
        font-weight: bold;
        font-size: px2vw(38);
        &.info-tab-current {
          height: px2vh(100);
          margin: 0 px2vw(10);
          margin-right: px2vw(10);
          border-radius: px2vw(20);
          background-color: rgba(255,255,255,0.7);
          color: rgba(65,122,220,1);
          font-weight: Bold;
        }
      }
    }
  }
  .patrol-search {
    width: px2vw(1020);
    height: 38px;
    margin: px2vw(30) px2vh(30);
    position: relative;
    top: px2vh(-75);
    border-radius: px2vw(20);
    overflow: hidden;

    .van-search {
      padding: 0 0;
      height: 38px;

    }
    .van-search__content {
      background: #fff;
      height: 38px;
    }
    /deep/.van-field__control {
      height: 30px;
    }
  }
  .patrol-main {
    height: calc(100vh - #{px2vh(423)} - 20px);
    overflow: auto;
    margin-top: px2vh(-65);
    padding-bottom: px2vh(30);
    .patrol-list {
      width: px2vw(1020);
      background: #fff;
      border-radius: px2vw(20) px2vh(20);
      padding-bottom: px2vh(30);
      margin: 0  px2vw(30) px2vh(30) px2vw(30) ;
      .patrol-title {
        width: px2vw(940);
        margin-left: px2vw(40);
        padding-top: px2vw(30);
        margin-bottom: px2vh(30);
        display: flex;
        align-items: center;
        justify-content: space-between;

        .patrol-title-left {
          display: flex;
          align-items: center;
          img {
            width: px2vw(64);
            height: px2vw(64);
          }
        }

        .patrol-main-title {
          //width: px2vw(660);
          margin-left: px2vw(20);
          margin-top: px2vh(8);
          font-size: px2vh(48);
          //white-space: nowrap;
          //overflow: hidden;
          //text-overflow: ellipsis;
          //float: left;
        }
        //.patrol-btn {
        //  width: px2vw(220);
        //  height: px2vh(80);
        //  background: #417ADC;
        //  float: right;
        //  border-radius: px2vw(40) px2vh(40);
        //}
      }
      .patrol-hr {
        width: px2vw(940);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
        margin-bottom: px2vh(42);
      }
      .top-patrol-main {
        position: relative;
        width: px2vw(900);
        font-size: px2vh(36);
        line-height: px2vh(62);
        margin-left: px2vw(60);
        .patrol-big-ltitle,.patrol-big-rtitle {
          color: #666;
        }
        .patrol-small-ltitle,.patrol-small-rtitle {
          margin-left: px2vw(25);
          color: #333;
        }
        .patrol-big-rtitle {
          margin-left: px2vw(225);
        }
        .patrol-btn {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: px2vw(220);
          height: px2vh(80);
          background: #417ADC;
          border-radius: px2vw(40) px2vh(40);
        }
      }
      .bottom-state-bar {
        margin-left: px2vw(60);
        width: px2vw(900);
        display: flex;
        justify-content: space-between;
        line-height: px2vh(62);
        font-size: px2vh(36);
      }
    }
  }
}
</style>
